///按钮的widget完整写法
import 'package:flutter/material.dart';

class BackToBottomOrTop extends StatefulWidget {
  final ScrollController controller;
  ///传入距离底部的距离
  final double bottom;

  BackToBottomOrTop(this.controller, {required this.bottom});

  @override
  _BackToBottomOrTopState createState() => _BackToBottomOrTopState();
}

class _BackToBottomOrTopState extends State<BackToBottomOrTop> {
  bool shown = false;

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(isScroll);
  }

  @override
  void dispose() {
    super.dispose();
    widget.controller.removeListener(isScroll);
  }

  void isScroll() {
    final bool toShow = (widget.controller.offset ?? widget.controller.position.maxScrollExtent) >
        MediaQuery.of(context).size.height / 2;
    if (toShow ^ shown) {
      setState(() {
        shown = toShow;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
        bottom: MediaQuery.of(context).padding.bottom + (widget.bottom ?? 40),
        right: 20,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                widget.controller?.animateTo(0,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.easeIn);
              },
              child: Container(
                  height: 44,
                  width: 44,
                  alignment: Alignment(0, 0),
                  decoration:BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      boxShadow: [
                        BoxShadow(
                            color: Color(0xFF000000).withOpacity(0.1),
                            blurRadius: 4,
                            spreadRadius: 0),
                      ]),
                  child: Column(
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 4),
                        child: Icon(
                          Icons.keyboard_arrow_up,
                          size: 20,
                          color: Colors.black38,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 0),
                        child: Text(
                          'Top',
                          style: TextStyle(fontSize: 10, color: Color(0xFFA1A6AA)),
                        ),
                      )
                    ],
                  )
              ),
            ),
            Container(height: 6,),
            GestureDetector(
              onTap: () {
                widget.controller?.animateTo(widget.controller.position.maxScrollExtent,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.easeIn);
              },
              child: Container(
                  height: 44,
                  width: 44,
                  alignment: Alignment(0, 0),
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      boxShadow: [
                        BoxShadow(
                            color: Color(0xFF000000).withOpacity(0.1),
                            blurRadius: 4,
                            spreadRadius: 0),
                      ]),
                  child: Column(
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 4),
                        child: Icon(
                          Icons.keyboard_arrow_down,
                          size: 20,
                          color: Colors.black38,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 0),
                        child: Text(
                          'Bottom',
                          style: TextStyle(fontSize: 10, color: Color(0xFFA1A6AA)),
                        ),
                      )
                    ],
                  )
              ),
            ),
          ],
        )
    );
  }
}